<template>
	<view>
		<view class="body">
			<view class="top">
				<view class="inputInfo">
					<view class="inputIcon">
						   <u-icon name="search" color="#979797" size="32"></u-icon>
					</view>
					<view class="inputHtml">
						<input type="text" value="" placeholder="请输入菜品名称" />
					</view>
				</view>
			</view>
			<view class="but">
				<view class="txtLeft">
					<view class="goodsTypeName" v-bind:class="{backgroundCl:index==ststusBack}" v-for="(item,index) in goodsType" @click="getGoodsInfos(index,item)" style="">
						<view class="goodsTypeNameTxt" v-bind:class="{backgroundCls:index==ststusBack}">
							{{item.title}}
						</view>
						<view class="countInfo" v-if="item.goodsTypeCount>0">
							{{item.goodsTypeCount}}
						</view>
					</view>
				</view>
				<view class="txtRight">
					<view class="goodsinfos" v-for="(item,index) in goodsListInfo" style="">
						<view class="infoImage">
							<image :src="bindUrls(item.image)" mode=""></image>
						</view>
						<view class="infoTxts">
							<view class="Txts1" style="">
								{{item.cai_name}}
							</view>
							<view class="Txts2" style="height: 30rpx;">
								{{null==item.danwei_name?"无规格":item.danwei_name}}
							</view>
							<view class="Txts3">
								<view class="lettTxt">
									<u-icon name="rmb" color="#FF5951" size="24"></u-icon>
									{{item.basic_amount}}
								</view>
								<view class="rightTxt">
									<view class="jian" @click="sets(1,item,index)">-</view>
									<view class="num">{{null==item.goodsCount?0:item.goodsCount}}</view>
									<view class="jia" @click="sets(0,item,index)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部购物车 -->
		<view class="bot">
			<view class="fflax">
				<view class="bot1">
					<image src="../../static/icon/week3.png" mode=""></image>
				</view>
				<view class="bot2" @click="opens">
					<u-icon name="rmb" color="#fff" size="32"></u-icon>
					{{rmbValue}}
				</view>
				<view class="bot3">
					<view class="botBut" @click="sub">
						下单
					</view>
				</view>
			</view>
		</view>
		
		<!-- 购物车加载弹框 -->
		<u-popup v-model="shoppingShow" mode="bottom" border-radius="20" mask-close-able="close" height="800rpx" z-index="99">
			<view style="overflow: hidden;">
				<view class="shoppingInfo">
					<view class="shoppingInfo1">
						<u-radio-group class="icontent-group" v-model="allShopping" size="24">
							<u-radio shape="circle" @change="allCheck" active-color="#3597F4" name="0" value="0">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="shoppingInfo2">
						全选
					</view>
					<view class="shoppingInfo3">
						（已选{{this.initDataInfo.length}}件）
					</view>
				</view>
				<view class="shoppingGoods" style="margin-top: 90rpx;margin-bottom: 150rpx;">
					<view class="shoppingGoodsInfo" v-for="(item,index) in initDataInfo">
						<view class="shoppingGoodsInfoRad">
							<u-checkbox-group style="margin-top: 60rpx;">
								<!-- <u-checkbox  @change="radioChange" shape="circle" active-color="#3597F4" name="1" value="1">
								</u-checkbox> -->
								<u-checkbox size="24" active-color="#3597F4" @change="updataPrice" v-model="initDataInfo[index].check"  shape="circle"></u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="infoImage">
							<image :src="bindUrls(item.goodsUrl)"></image>
						</view>
						<view class="infoTxts">
							<view class="Txts1">
								{{item.goodsName}}<!-- ({{item.check}}) -->
							</view>
							<view class="Txts2">
								{{null==item.danweiName?"无规格":item.danweiName}}
							</view>
							<view class="Txts3">
								<view class="lettTxt">
									<u-icon name="rmb" color="#FF5951" size="24"></u-icon>
									{{null==item.goodsPrice?"0.00":item.goodsPrice}}
								</view>
								<view class="rightTxt">
									<view class="jian" @click="shoppingdb(0,item,index)">-</view>
									<view class="num">{{item.goodsCount}}</view>
									<view class="jia" @click="shoppingdb(1,item,index)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<style lang="scss" scoped>
.shoppingGoods{
	margin-left: 40rpx;margin-right: 40rpx;
	.shoppingGoodsInfo{
		background: #FFF;height: 160rpx;display: flex;
		.shoppingGoodsInfoRad{
			width: 18px;//background: yellow;
		}
		.infoImage{
			image{margin-top: 20rpx;margin-left: 10rpx;
				width: 120rpx;height: 120rpx;border-radius: 8rpx;
			}
		}
		.infoTxts{flex: 1;//background: yellow;
			.Txts3{display: flex;margin-top: 14rpx;
				.lettTxt{font-size: 32rpx;color: #FF641F;
					flex: 1;padding-left: 20rpx;
				}
				.rightTxt{padding-right: 40rpx;
					flex: 1;display: flex;justify-content: flex-end;
					.jian{line-height: 34rpx;border-radius: 50%;color: #B1B1B1;
						height: 38rpx;width: 38rpx;background: #F0F0F0;text-align: center;
					}
					.num{color: #2D2D2D;font-size: 30rpx;
						width: 50rpx;height: 38rpx;text-align: center;
					}
					.jia{
						line-height: 34rpx;border-radius: 50%;color: #FFF;
							height: 38rpx;width: 38rpx;background: #5EAFF4;text-align: center;
					}
				}
			}
			.Txts2{margin-top: 17rpx;
				color: #999999;font-size: 22rpx;padding-left: 20rpx;
			}
			.Txts1{margin-top: 10rpx;
				color: #333333;font-size: 30rpx;padding-left: 20rpx;
			}
		}
	}
}
.shoppingInfo{position:fixed;background: #fff;width: 100%;z-index: 2;
	height: 90rpx;display: flex;line-height: 90rpx;border-bottom: #E0E0E0 solid 1rpx;
	.shoppingInfo1{
		margin-left: 40rpx;
		u-radio-group{margin-top: -10rpx;}
	}
	.shoppingInfo2{
		margin-left: -18rpx;color: #333333;font-size: 30rpx;
	}
	.shoppingInfo3{
		color: #999999;font-size: 26rpx;
	}
}
	
.backgroundCls{border-left: #50A8F2 solid 6rpx;border-left: #50A8F2 solid 6rpx;}
.bot{height: 96rpx;opacity: 0.9;border-radius: 40rpx;
	width: 90%;position: fixed;background: #282E38;bottom: 50rpx;
	margin: auto;left: 0;right: 0;text-align: center;z-index: 100;
	.fflax{top: 0; display: flex;
		.bot1{width: 100rpx;height: 96rpx;
			image{
				width: 87rpx;height: 91rpx;
			}
		}
		.bot2{flex: 1; height: 96rpx;
			text-align: left;line-height: 96rpx;padding-left: 16rpx;color: #fff;font-size: 32rpx;
		}
		.bot3{width: 196rpx;
			.botBut{background-color: #5EAFF4;
				width: 188rpx;height: 78rpx;border-radius: 39rpx;margin-top: 9rpx;text-align: center;
				color: #FFF;line-height: 78rpx;
			}
		}
	}
	
}
.body{
	background: #fff;width: 100%;height: 100%;display: flex;flex-direction: column;position: absolute;
	.top{
		height: 100rpx;background: #FFF;height: 100rpx;
		
		.inputInfo{margin-top: 25rpx;border-radius: 30px;
			margin-left: 20rpx;margin-right: 20rpx;height: 64rpx;background:#F6F7FA;
			display: flex;
			.inputIcon{
				width: 50rpx;height: 100%;//background: red;
				.u-icon{
					margin-top: 14rpx;margin-left: 20rpx;
				}
			}
			.inputHtml{
				flex: 1;
				input{//background: green;
					padding-left: 14rpx;line-height: 60rpx;
					height: 60rpx;width: 100%;color: #999;font-size: 26rpx;
				}
				
			}
		}
		
	}
	.but{overflow-y: auto;flex: 1;width: 100%;height: 100%;display: flex;
		.txtLeft{background-color: #F6F7FA;
			width: 185rpx;overflow-y: auto;overflow-x: hidden;
			.goodsTypeName{
				height: 100rpx;overflow: hidden;
				.goodsTypeNameTxt{height: 60rpx;margin-top: 16rpx;//background: red;
					text-align: center;line-height: 60rpx;
					color: #333333;font-size: 28rpx;font-weight: 500;
				}
				.countInfo{border-radius: 40%;z-index: 10;text-align: center;
					position: relative;top: -71rpx;margin-left: 150rpx;background: #E82821;color: #FFF;font-size: 22rpx;
				}
			}
			.backgroundCl{
				background: #fff;
				
			}
		}
		.txtRight{
			flex: 1;background: #FFF;overflow-y: auto;overflow-x: hidden;
			.goodsinfos{background: #FFF;height: 160rpx;display: flex;
				.infoTxts{flex: 1;//background: yellow;
					.Txts3{display: flex;margin-top: 14rpx;
						.lettTxt{font-size: 32rpx;color: #FF641F;
							flex: 1;padding-left: 20rpx;
						}
						.rightTxt{padding-right: 40rpx;
							flex: 1;display: flex;justify-content: flex-end;
							.jian{line-height: 34rpx;border-radius: 50%;color: #B1B1B1;
								height: 38rpx;width: 38rpx;background: #F0F0F0;text-align: center;
							}
							.num{color: #2D2D2D;font-size: 30rpx;
								width: 50rpx;height: 38rpx;text-align: center;
							}
							.jia{
								line-height: 34rpx;border-radius: 50%;color: #FFF;
									height: 38rpx;width: 38rpx;background: #5EAFF4;text-align: center;
							}
						}
					}
					.Txts2{margin-top: 17rpx;
						color: #999999;font-size: 22rpx;padding-left: 20rpx;
					}
					.Txts1{margin-top: 10rpx;
						color: #333333;font-size: 30rpx;padding-left: 20rpx;
					}
				}
				.infoImage{
					image{margin-top: 20rpx;margin-left: 10rpx;
						width: 120rpx;height: 120rpx;border-radius: 8rpx;
					}
				}
			}
		}
	}
}
</style>
<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				allShopping:0,//购物车全选值
				shoppingShow:false,//
				rmbValue:0.00,
				ststusBack:0,
				goodsType:[],//左侧商品分类数据定义
				goodsListInfo:[],//右侧商品信息数据定义
				initDataGoodsType:"",//临时分类id----------
				initDataGoodsName:"",//临时分类名字---------
				initDataGoodsTypeIndex:0,//临时分类index标识
				initDataInfo:[],//临时存储请求数据包---------
			}
		},
		onLoad() {
			this.initGetGoodsType();//获取分类
		},
		methods: {
			
			sub(){//获取最终的数据信息
				//this.$u.toast("临时存储请求数据包=="+JSON.stringify(this.initDataInfo));
				//console.log("-最终的数据是"+JSON.stringify(this.initDataInfo));
				
				//
				var httpData = [];
				
				for (var i = 0; i < this.initDataInfo.length; i++) {
					let dataGoods = {};//定义
					dataGoods.cai_id=this.initDataInfo[i].goodsId;
					dataGoods.nums=this.initDataInfo[i].goodsCount;
					if(this.initDataInfo[i].check){//选中的加进去发送到后台
						httpData.push(dataGoods);	
					}
				}
				
				if(httpData.length<=0){
					this.$u.toast("请选择商品后在下单");
					return;
				}
				
				var day3 = new Date();
				day3.setTime(day3.getTime()+24*60*60*1000);
				var s1 = day3.getFullYear()+"-" + (day3.getMonth()+1) + "-" + day3.getDate();
				let dataPar={
					"date":s1,//次日时间  2020-10-10 value 2020-10-11
					"data":httpData
				}
				var _this=this;
				//alert("http="+JSON.stringify(dataPar));
				this.$u.api.orderSubmit(dataPar).then(res => {
					//alert("==="+JSON.stringify(res.data));
					_this.$u.toast("下单成功");
					_this.shoppingShow=false;
					_this.initDataInfo=[];
					_this.rmbValue=0.00;
				});
				
			},
			
			allCheck(e){
				console.log("==="+e);
			},
			radioChange(e){
				console.log(JSON.stringify(e)+"==="+e);
			},
			
			shoppingdb(method,item,index){
				if(0==method){
					this.initDataInfo[index].goodsCount--;
				}else if(1==method){
					this.initDataInfo[index].goodsCount++;
				}else{
					console.log("shoppingdb-method-0or1!=null");
				}
				this.getGoodsPrice();//统计金额 临时数据里面统计的
			},
			opens() {
			    this.shoppingShow=true;
			},
			// close() {
			//     this.shoppingShow = false
			//     console.log('close');
			// },
			
			sets(method,item,index){
				if(0==method){//+
					this.goodsType[this.initDataGoodsTypeIndex].goodsTypeCount++;
					this.goodsListInfo[index].goodsCount++;
					let dataGoodsTyleList = {};//定义分类
					dataGoodsTyleList.goodsTypeId=this.initDataGoodsType;//商品分类id
					dataGoodsTyleList.goodsTypeName=this.initDataGoodsName;//商品分类名字
					/////////////////////////////////////////////////商品数据==
					dataGoodsTyleList.goodsId=item.id;//自定义商品id
					dataGoodsTyleList.goodsName=item.cai_name;//自定义商品菜名字
					dataGoodsTyleList.goodsUrl=item.image;//自定义商品图片
					dataGoodsTyleList.goodsPrice=item.basic_amount;//自定义价格
					dataGoodsTyleList.danweiName=item.danwei_name;// 自定义商品单位
					dataGoodsTyleList.check=true;// 自定义商品选中状态
					/////////////////////////////////////////////////
					var isExist = false;//
					for (var i = 0; i < this.initDataInfo.length; i++) {
						if(this.initDataInfo[i].goodsId===item.id){
							isExist =true;
							break;
						}
					}
					dataGoodsTyleList.goodsCount=item.goodsCount;
					for (var i = 0; i < this.initDataInfo.length; i++) {
						//console.log(this.initDataInfo[i].goodsId+"----"+item.id)
						if(this.initDataInfo[i].goodsId==item.id){
							//修改数量
							this.initDataInfo[i].goodsCount=item.goodsCount;
						}
					}
					!isExist && this.initDataInfo.unshift(dataGoodsTyleList);
				}else if(1==method){
					if(this.goodsListInfo[index].goodsCount>=1){
						this.goodsType[this.initDataGoodsTypeIndex].goodsTypeCount--;
						this.goodsListInfo[index].goodsCount--;
					}
					/////////////////////////////////////////////////
					let dataGoodsTyleList = {};//定义分类
					dataGoodsTyleList.goodsTypeId=this.initDataGoodsType;//商品分类id
					dataGoodsTyleList.goodsTypeName=this.initDataGoodsName;//商品分类名字
					/////////////////////////////////////////////////商品数据==
					dataGoodsTyleList.goodsId=item.id;//自定义商品id
					dataGoodsTyleList.goodsName=item.cai_name;//自定义商品菜名字
					dataGoodsTyleList.goodsUrl=item.image;//自定义商品图片
					dataGoodsTyleList.goodsPrice=item.basic_amount;//自定义价格
					dataGoodsTyleList.danweiName=item.danwei_name;// 自定义商品单位
					dataGoodsTyleList.check=true;// 自定义商品选中状态
					/////////////////////////////////////////////////
					var isExist = false;//
					for (var i = 0; i < this.initDataInfo.length; i++) {
						if(this.initDataInfo[i].goodsId===item.id){
							isExist =true;
							break;
						}
					}
					dataGoodsTyleList.goodsCount=item.goodsCount;		
					for (var i = 0; i < this.initDataInfo.length; i++) {
						//console.log(this.initDataInfo[i].goodsId+"----"+item.id)
						if(this.initDataInfo[i].goodsId==item.id){
							//修改数量
							this.initDataInfo[i].goodsCount=item.goodsCount;
						}
					}
					!isExist && this.initDataInfo.unshift(dataGoodsTyleList);
				}
				this.getGoodsPrice();
				//更改分类已选中的商品数量
				
			},
			updataPrice(){//购物车选中状态发生变化触发
				this.getGoodsPrice();this.getGoodsPrice();
			},
			//  this.getGoodsPrice();
			getGoodsPrice(){//实时统计金额
				var sumValue=0;//
				//console.log("金额统计=json="+JSON.stringify(this.initDataInfo));
				for (var i = 0; i < this.initDataInfo.length; i++) {
					var goodsPrice=null==this.initDataInfo[i].goodsPrice?0:this.initDataInfo[i].goodsPrice;//商品金额
					var goodsCount=this.initDataInfo[i].goodsCount;//商品数量
					console.log(this.initDataInfo[i].check+"====金额条件里面打印==="+this.initDataInfo[i].check)
					if(this.initDataInfo[i].check){//只有选中的计算统计价格
						sumValue = this.numAdd(sumValue,goodsPrice*goodsCount)	
						console.log("统计了价格="+sumValue);
					}
				}
				this.rmbValue=this.toDecimal(sumValue);
			},
			//价格精确 格式化  1.00
			toDecimal(x) {   
			        var f = parseFloat(x);   
			        if (isNaN(f)) {   
			            return false;   
			        }   
			        var f = Math.round(x*100)/100;   
			        var s = f.toString();   
			        var rs = s.indexOf('.');   
			        if (rs < 0) {   
			            rs = s.length;   
			            s += '.';   
			        }   
			        while (s.length <= rs + 2) {   
			            s += '0';   
			        }   
			        return s;   
			}, 
			//价格计算，排除浮点价格计算
			numAdd(num1, num2) {
			    var baseNum, baseNum1, baseNum2;
			    try {
			        baseNum1 = num1.toString().split(".")[1].length;
			    } catch (e) {
			        baseNum1 = 0;
			    }
			    try {
			        baseNum2 = num2.toString().split(".")[1].length;
			    } catch (e) {
			        baseNum2 = 0;
			    }
			    baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
			    return (num1 * baseNum + num2 * baseNum) / baseNum;
			},
			
			
			//获取分类下商品
			getGoodsInfos(index,item){
				this.initDataGoodsType=item.id;//当前的分类id存临时了
				this.initDataGoodsName=item.title;//当前的分类名字存临时
				this.ststusBack=index;
				this.initDataGoodsTypeIndex=index;
				var _this=this;
				let dataPar={
					"cate_id":item.id
				}
				this.$u.api.caiList(dataPar).then(res => {
					//alert("==="+JSON.stringify(res.data));
					_this.goodsListInfo=[];//初始化
					_this.goodsListInfo=res.data;
					_this.goodsListInfo.forEach((item,index)=>{
						Vue.set(item,'goodsCount',0);
					})
				});
			},
			initGetGoodsType(){//获取分类
				var _this=this;
				let dataPar={}
				this.$u.api.caiCateList(dataPar).then(res => {
					if(res.data.length>0){
						_this.goodsType=res.data;
						
						_this.goodsType.forEach((item,index)=>{
							Vue.set(item,'goodsTypeCount',0);
						})
						
						_this.getGoodsInfos(0,res.data[0]);
						
					}else{
						_this.$u.toast("无分类数据信息");//系统初始化的时候出现
					}
				});
			},
			bindUrls(url){// 商品图片单独处理
				var path=this.serviceUrl+url;
				return path;
			}
		}
	}
</script>


